<template>
	<view class="login">


		<img mode="aspectFill" style="height:100vh;   width: 100%;" alt="" :src="img">
		<view class="content">
			<u-form :model="form" ref="uForm" :error-type="errorType">
				<u-form-item prop="username">
					<u-cell-item :arrow="false" :border="false" hover-class="cell-hover-class">

						<span slot="icon"> <i class="iconfont  icon-user-o"></i></span>
						<u-input v-model="form.username" placeholder="请输入账号" />
					</u-cell-item>
				</u-form-item>
				<view style="margin-top: 10px;">
					<u-form-item prop="password">
						<u-cell-item :arrow="false" :border="false" hover-class="cell-hover-class">
							<i class="iconfont  icon-suo" slot="icon"></i>
							<u-input v-model="form.password" placeholder="请输入密码" type="password" @confirm="submit" />
						</u-cell-item>
					</u-form-item>
				</view>

				<view style="margin-top: 20px;">
					<u-button type="primary" @click="submit">登录</u-button>

				</view>
			</u-form>
		</view>



	</view>
</template>

<script>
	import {
		Login,
		GetInfo
	} from "@/pages/api/api"

	import indexBackgroundImage from "@/static/images/loginbg.jpg"
	export default {
		data() {
			return {

				indexBackgroundImage: indexBackgroundImage,
				img: require("../../static/images/loginbg.jpg"),
				form: {
					username: '',
					password: '',
					loginType: "1"
				},
				errorType: ['message'],
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}, {
						min: 6,
						message: '密码最少6位数',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},

		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			uni.hideTabBar();

		},
		methods: {

			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						Login(this.form).then(res => {
							// console.log(res)
							if (res.code == 200) {
								uni.clearStorageSync();
								console.log()
								uni.setStorage({
									key: 'token',
									data: res.token,
								});
								GetInfo(res.token).then(v => {
									console.log(v);
									if (v.code == 200) {
										uni.setStorage({
											key: 'userId',
											data: v.user.userId
										});
										uni.setStorage({
											key: 'nickName',
											data: v.user.nickName
										});
										uni.setStorage({
											key: 'phonenumber',
											data: v.user.phonenumber
										});
										uni.showToast({
											title: "登录成功",
											duration: 2000
										});
										setTimeout(() => {
											uni.switchTab({
												url: '../home/index'
											});
										}, 1000)
									}
								})
							}

						})

					}
				});

			}

		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100vh;
		position: fixed;
	}

	.iconfont {
		font-size: 22px;
		margin-right: 5px;
	}

	.content {
		width: 75%;
		margin: 0 auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.login /deep/ .u-cell {
		background-color: #ffffff !important;
		border-radius: 5px;
		height: 40px;
	}

	.login /deep/ .u-border-bottom:after,
		{
		border: none
	}

	.login /deep/ .u-form-item {
		padding: 0
	}
</style>
